// 左边的 创建一次就不用管了
hot.forEach((item, i) => {
    const el = $(`
        <div class="item ${i === 0 ? 'active' : ''}">
            ${item.city} ${item.value}（${item.isDesc ? '下降' : '上升'}）
        </div>
    `);
    el.appendTo($('.rank-wrapper .nav'));
});

// 右边的 遇到情况就得重新创建
function render (activeIndex) {
    // 先清空
    $('.rank-wrapper .intro').html('');
    // 循环数据渲染
    for (const item of hot[activeIndex].detail) {
        const el = $(`
            <div class="item">
                ${item.goodsName} ${item.value}（${item.isDesc ? '下降' : '上升'}）
            </div>
        `);
        el.appendTo($('.rank-wrapper .intro'));
    }
}

render(0);

$('.rank-wrapper .nav .item').on('mouseenter', function (e) {
    // 阻止冒泡
    e.stopPropagation();
    // 切换高亮
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
    // 通过当前索引渲染右侧数据
    render($(this).index());
});

let counter = 1;
let timer;
function start () {
    timer = setInterval(() => {
        $('.rank-wrapper .nav .item').eq(counter % hot.length).trigger('mouseenter');
        counter++;
    }, 1000);
}

start();

$('.rank-wrapper').on('mouseenter', () => {
    clearInterval(timer);
});

$('.rank-wrapper').on('mouseleave', start);
